<template>
  <div
    class="container"
    v-loading="loading"
    element-loading-text="正在加载可视化数据"
  >
    <topHeaderVue />
    <div class="main-body">
      <showData :data="dataOfShowData" />
      <div class="chartContainer">
        <div class="leftOrRight">
          <chartGather :data="chartGatherData" />
          <chartCharge :data="chartChargeData" />
        </div>
        <div class="middle">
          <chartMap />
        </div>
        <div class="leftOrRight">
          <chartGatherToday :data="gatherTodayData"/>
          <chartHospitalizationToday :data="hospitalizationTodayData"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import topHeaderVue from "@/components/screenPage/hospital/topHeader.vue";
import showData from "@/components/screenPage/hospital/showData.vue";
import {
  getGather,
  getChargeData,
  getOutpatient,
  gethospitalization
} from "@/request/hospital";
import chartGather from "@/components/screenPage/hospital/chart/chartGather.vue";
import chartGatherToday from "@/components/screenPage/hospital/chart/chartGatherToday.vue";
import chartHospitalizationToday from "@/components/screenPage/hospital/chart/chartHospitalizationToday.vue";
import chartCharge from "@/components/screenPage/hospital/chart/chartCharge.vue";
import chartMap from "@/components/screenPage/hospital/chart/chartMap.vue";
const loading = ref(true);
// 展示数据
const dataOfShowData = reactive([]);
// 各医院采集数据
const chartGatherData = reactive([]);
// 各医院收费数据
let chartChargeData = reactive([]);
// 各医院今日采集数
let gatherTodayData = reactive([]);
// 就诊人数(当日)
let hospitalizationTodayData = reactive([]);
const getAllData = async () => {
  //获取采集数据
  const {
    data: { data: getGatherRes },
  } = await getGather();
  //获取收费数据
  const {
    data: { data: getChargeDataRes },
  } = await getChargeData();
  //获取住院数据
  const {
    data: { data: getOutpatientRes },
  } = await getOutpatient();
  //获取门诊数据
  const {
    data: { data: gethospitalizationRes },
  } = await gethospitalization();
  
  return {
    getGatherRes,
    getChargeDataRes,
    getOutpatientRes,
    gethospitalizationRes,
  };
};

onMounted(async () => {
  loading.value = true;
  let res = await getAllData();
  loading.value = false;
  console.log(res);
  dataOfShowData.push(
    {
      total: res.getGatherRes.allgather,
      month: res.getGatherRes.monthegather,
    },
    {
      total: res.gethospitalizationRes.allHospitalization,
      month: res.gethospitalizationRes.montHospitalization,
    },
    {
      total: res.getOutpatientRes.allOutpatient,
      month: res.getOutpatientRes.monthOutpatient,
    }
  );
  res.getGatherRes.hospital.map((item) => {
    gatherTodayData.push({
      type: 'line',
      name: item.hospitalName,
      data: item.today,
      smooth: true
    })
    chartGatherData.push({
      name: item.hospitalName,
      value: item.number,
    });
  });
  let map = {};

  res.getChargeDataRes.map((item) => {
    if (!map[item.hospitalName]) {
      map[item.hospitalName] = [item.perCapita];
    } else {
      map[item.hospitalName] = [...map[item.hospitalName], item.perCapita];
    }
  });
  res.getOutpatientRes.hospital.map((item) => {
    if (!map[item.hospitalName]) {
      map[item.hospitalName] = [item.number];
    } else {
      map[item.hospitalName] = [...map[item.hospitalName], item.number];
    }
  });
  res.gethospitalizationRes.hospital.map((item) => {
    hospitalizationTodayData.push({
      type: 'line',
      name: item.hospitalName,
      data: item.today,
      smooth: true
    })
    if (!map[item.hospitalName]) {
      map[item.hospitalName] = [item.number];
    } else {
      map[item.hospitalName] = [...map[item.hospitalName], item.number];
    }
  });
  for(let key in map) {
    chartChargeData.push({
      type: 'bar',
      name: key,
      data: map[key],
      stack: 'total'
    })
  }
});
</script>

<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: #081832;
  .main-body {
    width: 100vw;
    padding: 1.85vh 1.04vw;
    .chartContainer {
      display: flex;
      justify-content: space-between;
      padding-top: 5.09vh;
      .leftOrRight {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}
</style>
